<!--  -->
<template>
  <div style="padding: 10px">
    <!--    功能区域-->
    <div style="margin: 10px 0">
      <el-button type="primary" @click="add">新增</el-button>
    </div>
    <!--    搜索区域-->
    <div style="margin: 10px 0">
      <el-input v-model="search" placeholder="请输入用户真实姓名" style="width: 20%" clearable></el-input>
      <el-button type="primary" style="margin-left: 5px" @click="getAll">查询</el-button>
    </div>
    <el-table :data="tableData" border stripe style="width: 100% ">
      <el-table-column prop="username" label="用户名" sortable/>
      <el-table-column prop="nickName" label="昵称" />
      <el-table-column prop="sex" label="性别" />
      <el-table-column prop="phone" label="联系方式" />
      <el-table-column prop="createTime" label="创建时间"/>
      <el-table-column fixed="right" label="操作栏">
        <template #default="scope">
          <el-button  size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-popconfirm title="你确定删除吗?" @confirm="handleDelete(scope.row.id)">
            <template #reference>
              <el-button  size="mini" type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin: 10px 0">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>


      <el-dialog
          title="提示"
          :visible.sync="dialogVisible"
          width="30%"
      >
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="用户名">
            <el-input v-model="form.username"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="form.password"></el-input>
          </el-form-item>
          <el-form-item label="昵称">
            <el-input v-model="form.nickName"></el-input>
          </el-form-item>
          <el-form-item label="联系方式">
            <el-input v-model="form.phone"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio v-model="form.sex" label="男" >男</el-radio>
            <el-radio v-model="form.sex" label="女" >女</el-radio>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="save">确 定</el-button>
  </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import request from "@/router/request";

export default {
  components: {
  },
  data(){
    return{
      form:{},
      tableData:[],
      dialogVisible:false,
      search:"",
      currentPage: 1,
      pageSize: 10,
      total: 0,

    }
  },
  //页面加载时调用的方法
  created() {
    this.getAll()
  },

  methods:{
    //查询
    getAll(){
      request.get("/user",{
        params:{
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          search: this.search
        }
      }).then(res=>{
        this.total=res.data.total
        this.pageSize=res.data.size
        this.tableData=res.data.records
        console.log(this.tableData+"size为"+this.pageSize)
      })
    },
    //弹出新增/编辑 窗口的按钮
    add(){
      this.dialogVisible=true;
      this.form={}
    },
    //确定按钮
    save(){
      if (this.form.id){//id存在 为修改
        request.put("/user",this.form).then(res=>{
          if (res.state ==='0'){
            this.$message.success("修改成功");

            this.dialogVisible=false
            console.log(res)
          }else {
            this.$message.error("发生未知异常,修改失败"+res.message)
          }
          //刷新页面，无论成败
          this.getAll()
        })

      }else {//id不存在为新增
        request.post("/user",this.form).then(res=>{
          if (res.state ==='0'){
            this.$message.success("新增成功");
            this.dialogVisible=false
            console.log(res)
          }else {
            this.$message.error(res.message)
          }
          //刷新页面，无论成败
          this.getAll()
        })
      }
    },
    //编辑框
    handleEdit(row){
      this.form = JSON.parse(JSON.stringify(row))
      this.dialogVisible=true
    },

    //删除
    handleDelete(id){
      request.delete("/user/"+id).then(res=>{
        if (res.state ==='0'){
          this.$message.success("删除成功");
          this.dialogVisible=false
          console.log(res)
        }else {
          this.$message.error("发生未知异常,删除失败")
        }
        //刷新页面，无论删除还是失败
        this.getAll()
      })
      console.log(id)
    },
    handleSizeChange(pageSize){//改变当前每页个数触发
      this.pageSize=pageSize
      this.getAll()
    },
    handleCurrentChange(pagenum){//改变当前页面触发
      this.currentPage=pagenum
      this.getAll()
    }
  },
};
</script>
<style lang='less' scoped>
</style>
